import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProCard from '@ant-design/pro-card';
import { connect, FormattedMessage } from 'umi';
import { Button, Form } from 'antd';
import ProForm, { ProFormSelect, ProFormText, ProFormTextArea, ProFormUploadDragger } from '@ant-design/pro-form';
import { InfoCircleOutlined } from '@ant-design/icons';
import { useIntl } from '@/.umi/plugin-locale/localeExports';

const AddItem = (props) => {

  const { dispatch, submitting, currentUser } = props;

  const intl = useIntl();
  const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 7,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 12,
      },
      md: {
        span: 10,
      },
    },
  };
  const submitFormLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 10,
        offset: 7,
      },
    },
  };

  const onFinish = (values) => {
    const formData = new FormData();
    formData.append('file', values.file[0].originFileObj);
    formData.append('fileType', values.file[0].originFileObj.type);
    formData.append('name', values.name);
    formData.append('description', values.description);
    formData.append('category', values.category);
    formData.append('userID', currentUser.id);
    dispatch({
      type: 'addItem/submit',
      payload: formData,
    });
  };

  return (
    <PageContainer>
      <ProCard>
        <ProForm
          {...formItemLayout}
          layout="horizontal"
          submitter={{
            render: () => {
              return (
                <Form.Item
                  {...submitFormLayout}
                  style={{
                    marginTop: 32,
                  }}
                >
                  <Button type="primary" htmlType="submit" loading={submitting}>
                    <FormattedMessage id="pages.work.upload.form.submit" />
                  </Button>
                </Form.Item>
              );
            },
          }}
          onFinish={onFinish}
        >
          <ProFormText
            name="name"
            label={<FormattedMessage id="pages.work.upload.title.label" />}
            placeholder={intl.formatMessage({ id: 'pages.work.upload.title.placeholder' })}
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'pages.work.upload.title.required' }),
              },
            ]}
          />
          <ProFormTextArea
            name="description"
            label={<FormattedMessage id="pages.work.upload.abstract.label" />}
            placeholder={intl.formatMessage({ id: 'pages.work.upload.abstract.placeholder' })}
            rows={4}
          />

          <ProFormSelect
            name="category"
            label={<FormattedMessage id="pages.work.upload.category.label" />}
            placeholder={intl.formatMessage({ id: 'pages.work.upload.category.placeholder' })}
            valueEnum={{
              1: '文字作品',
              2: '图片作品',
              3: '视频作品',
            }}
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'pages.work.upload.category.required' }),
              },
            ]}
          />
          <ProFormUploadDragger
            name="file"
            label={<FormattedMessage id="pages.work.upload.dragger.label" />}
            title={<FormattedMessage id="pages.work.upload.dragger.title" />}
            description={<FormattedMessage id="pages.work.upload.dragger.description" />}
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'pages.work.upload.dragger.required' }),
              },
            ]}
            max={1}
          />
          <ProFormText readonly label={<InfoCircleOutlined style={{ marginRight: 4 }} />} />
        </ProForm>
      </ProCard>
    </PageContainer>
  );
};

export default connect(({ user, loading }) => ({
  currentUser: user.currentUser,
  submitting: loading.effects['addItem/submit'],
}))(AddItem);
